<template>
  <div class="index-wrapper">
    <!-- :on-refresh="refresh"  上啦刷新 -->
    <scroller ref="myScroller" :on-infinite="infinite">
    <!-- 头部开始 -->
    <div class="index-header">
      <div class="position-bar">
        <div class="positon-box">
          <i class='iconfont icon-dingwei'></i>
          <span class="text">东城区北京市政府</span>
        </div>
        <div class="wether-box">

        </div>
      </div>
      <div class="search-box">
        搜索商家、商品
      </div>

      <div class="swipper-box">
        <div class="swiper-container" id="line-slide">
          <div class="swiper-wrapper">
            <div class="swiper-slide" style="width:auto">张亮麻辣烫</div>
            <div class="swiper-slide" style="width:auto">肯德基</div>
            <div class="swiper-slide" style="width:auto">水果捞</div>
            <div class="swiper-slide" style="width:auto">麻辣香锅</div>
            <div class="swiper-slide" style="width:auto">我的菜</div>
            <div class="swiper-slide" style="width:auto">千层蛋糕</div>
            <div class="swiper-slide" style="width:auto">慕斯蛋糕</div>
            <div class="swiper-slide" style="width:auto">蟹肉煲</div>
            <div class="swiper-slide" style="width:auto">烤肉饭</div>
          </div>
          <!-- 如果需要滚动条 -->
          <div class="swiper-scrollbar"></div>
        </div>
      </div>
      <!-- 头部结束 -->

    </div>

    <div class="slide-box">
      <!-- 轮播开始 -->
      <div class="swiper-container slide-menu" id="slide-menu">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../assets/img/1jpeg.jpeg" alt="">
            <p>甜品饮品</p>
          </div>
          <div class="swiper-slide">
            <img src="../assets/img/2jpeg.jpeg" alt="">
            <p>商超便利</p>
          </div>
          <div class="swiper-slide">
            <img src="../assets/img/3jpeg.jpeg" alt="">
            <p>预定早餐</p>
          </div>
          <div class="swiper-slide">
            <img src="../assets/img/4jpeg.jpeg" alt="">
            <p>果蔬生鲜</p>
          </div>
          <div class="swiper-slide">
            <img src="../assets/img/5jpeg.jpeg" alt="">
            <p>新店特惠</p>
          </div>
          <div class="swiper-slide">
            <img src="../assets/img/6jpeg.jpeg" alt="">
            <p>美食</p>
          </div>
          <div class="swiper-slide">
            <img src="../assets/img/7jpeg.jpeg" alt="">
            <p>准时达</p>
          </div>
          <div class="swiper-slide">
            <img src="../assets/img/8jpeg.jpeg" alt="">
            <p>宵夜</p>
          </div>
          <div class="swiper-slide">
            <img src="../assets/img/9jpeg.jpeg" alt="">
            <p>周末福利</p>
          </div>
          <div class="swiper-slide">
            <img src="../assets/img/10jpeg.jpeg" alt="">
            <p>汉堡薯条</p>
          </div>
          <div class="swiper-slide">
            <img src="../assets/img/11jpeg.jpeg" alt="">
            <p>包子粥店</p>
          </div>
          <div class="swiper-slide">
            <img src="../assets/img/12jpeg.jpeg" alt="">
            <p>鲜花蛋糕</p>
          </div>
          <div class="swiper-slide">
            <img src="../assets/img/13jpeg.jpeg" alt="">
            <p>麻辣烫</p>
          </div>
          <div class="swiper-slide">
            <img src="../assets/img/14jpeg.jpeg" alt="">
            <p>地方菜系</p>
          </div>
          <div class="swiper-slide">
            <img src="../assets/img/15jpeg.jpeg" alt="">
            <p>披萨意面</p>
          </div>
          <div class="swiper-slide">
            <img src="../assets/img/16jpeg.jpeg" alt="">
            <p>异国料理</p>
          </div>

        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

      </div>
      <!-- 轮播结束 -->
    </div>

    <div class=" shop-box">
      <h3>推荐商家</h3>
      <ul>
        <router-link tag="li" :to="{path:'/shop/'+index}" v-for="(m,index) in sellers" :key="index" >
          <img :src="m.avatar" alt="">
          <div class="info">
            <div class="title">
              {{m.name}}
            </div>
            <div class="star-box">
              月售{{m.sellCount}} 单
            </div>
            <div class="dilivery-box">
              {{m.minPrice}}元起送
            </div>
          </div>
        </router-link>
      </ul>
    </div>

    </scroller>
    <footerBar></footerBar>
  </div>
</template>
<script>
  import Vue from 'vue'
  import footerBar from '@/page/footer'
  import VueAwesomeSwiper from 'vue-awesome-swiper'
//  import {Loadmore} from 'mint-ui';
  import VueScroller from 'vue-scroller'

  Vue.use(VueScroller)
//  Vue.use(Loadmore)
  export default {
    name: "",
    data() {
      return {
        sellers: [],
        notData: false,
        totalSeller: [],
      }
    },
    components: {
      footerBar,
      VueAwesomeSwiper
    },
    mounted(){
      // 头部swiper滑动
      var mySwiper = new Swiper('#line-slide', {
        direction: 'horizontal',
        slidesPerView: 'auto',
        // 如果需要滚动条
        scrollbar: '.swiper-scrollbar',
      })
      //    轮播导航
      var menuSwiper = new Swiper('.slide-menu', {
        direction: 'horizontal',
        slidesPerColumn: 2,
        slidesPerView: 4,
        slidesPerGroup: 4,
        // 如果需要分页器
        pagination: '.swiper-pagination',
      })
      //  获取数据初始化
      var url = '/api/v2/movie/in_theaters';
      this.axios.get('/api/seller').then((res) => {
        if (res.data.errno == 0) {
          this.totalSeller = res.data.data;
          this.sellers = this.totalSeller.splice(0, 5);
          let temp = this.totalSeller.concat();
        }
      })
    },
    methods: {
      infinite(done){
        let self = this;
        if (this.noData){
              setTimeout(()=>{
                self.$refs.myScroller.finishInfinite(2);
              });
            return
          }
        let start = this.sellers.length;
        setTimeout(() => {
          let total = self.totalSeller.concat(0);
          let temp = total.splice(start,  5);
          if (temp.length==0){
              self.noData=true;
          }
          this.sellers = this.sellers.concat(temp)
          self.$refs.myScroller.resize();
          done();
        }, 1500)
      }
    }

  }
</script>
<style lang="less" scoped>
  @import "../../static/less/var.less";

  .clear:after {
    display: block;
    clear: both;
    content: '';
  }

  // 头部swiper的样式
  #line-slide {
    .swiper-slide {
      color: #fff;
      padding: 0 @base*10rem;
    }
  }

  .slide-box {
    height: @base*354rem;
    .slide-menu {
      height: @base*354rem;
      /*background-color: gray;*/
      .swiper-slide {
        background: #fff;
        height: 50%;
        text-align: center;
        img{
          margin: 0 auto;
          width: @base*100rem;
        }

      }
    }
  }

  .index-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom: @base*100rem;
    .index-header {
      height: @base*204rem;
      padding: @base*20rem @base*28rem;
      background-color: @mc;
      .position-bar {
        height: @base*69rem;
        display: flex;
        justify-content: space-between;
        line-height: @base*69rem;
        color: #fff;
        .positon-box {
          width: @base*417rem;
        }
        .wether-box {
          width: @base*106rem;
        }
      }
      .search-box {
        height: @base*70rem;
        line-height: @base*70rem;
        margin: @base*15rem;
        padding: @base*1rem;
        color: @fc1;
        text-align: center;
        border-radius: 20px;
        background-color: #ffffff;
        font-size: @base*20rem;
      }
    }
  }

  .shop-box {
    background-color: #fff;
    margin-top: @base*10rem;
    h3 {
      font-size: @base*30rem;
      padding: @base*20rem;

    }
    ul {
      width: 100%;
      list-style: none;
      li {
        display: flex;
        justify-content: space-between;
        padding: @base*10rem @base*20rem;
        border-bottom: 1px solid @bc1;
        img {
          width: @base*120rem;
          height: @base*120rem;
        }

        .info {
          display: flex;
          flex-direction: column;
          flex: 1;
          margin-left: @base*20rem;
          font-size: @base*20rem;
          .title{
            font-weight: 700;
            font-size: @base*25rem;
          }
        }
      }
    }
  }
</style>
